<template>
  <div class="edit-component">
    <el-form :inline="true" :model="formData" :rules="validatorRules" ref="formData" class="demo-form-inline">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="formData.name" maxlength="20" placeholder="请输入设备名称"></el-input>
      </el-form-item>
      <!--<el-form-item label="车辆型号" prop="mode">
        <el-input v-model="formData.code" maxlength="20" placeholder="请输入车辆型号"></el-input>
      </el-form-item>-->
	  <el-form-item label="设备编号" prop="code">
	    <el-input v-model="formData.code" maxlength="32" placeholder="请输入设备编号"></el-input>
	  </el-form-item>
	<!--  <el-form-item label="车辆类型" prop="type">
	    <el-select v-model="formData.type" placeholder="请选择车辆类型">
	        <el-option v-for="item in areaplaceTypeList" :label="item.name" :value="item.name" :key="item.id"></el-option>
	    </el-select>
	  </el-form-item>-->
      <el-form-item label="设备责任人" prop="responsible">
        <el-input v-model="formData.responsible" readonly  placeholder="请选择责任人(点击右侧加号)" suffix-icon="">
			<i slot="suffix" class="icon el-icon-circle-plus-outline" @click="openSelector"></i>
		</el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark"  >
        <el-input v-model="formData.remark" maxlength="100" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div class="button-bar">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      <el-button type="primary" @click="resetForm">重 置</el-button>
    </div>
    <userSelector class="uselector" ref="userSelector" :initData="formData.responsible" @output="checkedUser" limit="3"></userSelector>
  </div>
</template>
<script>
import treeMixin from "@/components/tree/tree.mixin.js"
import userSelector from "@/components/userSelector"
  export default {
    mixins:[treeMixin],
	components:{userSelector},
    props:{
      initData:{
        type:Object,
        default:()=>{},
        required:false,
      },
    },
    data(){
      return{
        formData:{
          id:'',
          name:'',
            code:"",
          responsible:'',
		  responsibleId:"",
          remark:''
        },
        validatorRules:{
          name:[
            {required: true, message: '请输入', trigger: 'blur'},
          ],
          responsible:[
            {required: true, message: '请输入',trigger: 'blur'},
          ],
            code:[
				{required: true, message: '请输入',trigger: 'blur'},
                { min: 0, max: 32, message: "长度在32个字符内" }
            ],
            type:[
                {required: true, message: '请选择', trigger: 'change'}
            ]
        },
		btnLoading:false
      }
    },
    watch:{
      initData:{
        handler(newVal){
          this.formData= newVal ||{}
        },
        deep:true
      }

    },
    methods:{
      //验证设备code是否重复
      checkDeviceCode(rule,value,callback){
        var self = this;
        var data = {
          code:value
        }
        this.$http.getDeviceByCode(data).then(res => {
          if(res.data.data && !(self.formData.id && self.formData.id == res.data.data.id)){
            callback(new Error('设备编号不能重复！！'));
          }else{
            callback();
          }
        })
      },
      submit(){
        var isValidate=false
        this.$refs.formData.validate((bool)=>{
            isValidate=bool
        })
        if(!isValidate){return}
        let submitData=this.formData;
        submitData.moduleName="设备管理"
		this.btnLoading=true
        this.$http.addGpsDevice(submitData)
        .then((res)=>{
          this.$message.success("操作成功！")
          this.resetForm()
          this.$emit("refresh")
          this.$emit('closeDialog',false)
		  this.btnLoading=false
        }).catch((err)=>{
			this.btnLoading=false
           throw(err)
        })

      },

      resetForm(){
          if(this.initData){
              for(var key in this.formData){
                  if(this.initData[key]){
                      this.formData[key] = this.initData[key]
                  }else{
                      this.formData[key] = ""
                  }
              }
          }else {
              this.$refs.formData.resetFields()
              for(var key in this.formData){
                  this.formData[key]=""
              }
          }

      },

      cancel(){
        this.resetForm()
       // this.$emit("refresh")
        this.$emit('closeDialog',false)
      },

      //获取车辆类型
      /*getAreaplaceTypeList(){
          var submitData={parentCode:'carType'}
          this.$http.getDictKeyList(submitData)
          .then((res)=>{
              var data=res.data.data ||[];
              this.areaplaceTypeList=data
          }).catch((err)=>{
              throw(err)
          })
      },*/

	  openSelector(){
		  this.$refs.userSelector.showDialog=true
	  },

	  checkedUser(users){
		  var ids=users.map((item)=>{
			  return item.id
		  }).toString()
		  var names=users.map((item)=>{
			  return item.name
		  }).toString()
		  this.$set(this.formData,"responsibleId",ids)
		  this.$set(this.formData,"responsible",names)
	  }

    },

    created(){
      //this.getAreaplaceTypeList()
    }

  }
</script>
